<template>
	<div class="title">
		底部导航设置
		<span class="title-tips">导航至少添加2个，最多添加5个</span>
	</div>
	<el-form class="mt-4 w-[420px]" label-width="90px">
		<el-card class="content mb-4" shadow="never">
			<div class="sub-title">样式设置</div>
			<el-form-item label="默认颜色：">
				<el-color-picker v-model="formData.style.default_color" :predefine="predefineColors" />
				<span class="w-[100px] ml-2 mr-2">
					<el-input v-model="formData.style.default_color" />
				</span>
				<el-text class="cursor-pointer" type="primary" @click="formData.style.default_color = ''">重置</el-text>
			</el-form-item>
			<el-form-item label="选中颜色：">
				<el-color-picker v-model="formData.style.selected_color" :predefine="predefineColors" />
				<span class="w-[100px] ml-2 mr-2">
					<el-input v-model="formData.style.selected_color" />
				</span>
				<el-text class="cursor-pointer" type="primary" @click="formData.style.selected_color = ''">重置</el-text>
			</el-form-item>
		</el-card>
		<el-card class="content mb-4" shadow="never">
			<div class="sub-title">导航设置</div>
			<div class="mb-[18px]">
				<draggable class="draggable" v-model="formData.list" animation="300" draggable=".draggable" :move="onMove">
					<template v-slot:item="{ element, index }">
						<div class="sub-item max-w-[400px] cursor-pointer" :class="{ draggable: index != 0 }">
							<div class="close-btn" @click="handleDelete(index)">
								<SvgIcon name="ele-Close" size="12" />
							</div>
							<div class="bg-fill-light w-full p-4 mt-4">
								<el-form-item label="导航图标：">
									<imageUpload v-model="element.selected_icon" :limit="1" />
									<imageUpload v-model="element.unselected_icon" :limit="1" />
									<div class="el-form-tips">选中/未选图标，建议尺寸：100*100</div>
								</el-form-item>
								<el-form-item label="导航名称：">
									<el-input v-model="element.name" placeholder="请输入导航名称" />
								</el-form-item>
								<el-form-item label="链接地址：">
									<linkSelect v-model="element.link" :type="1" />
								</el-form-item>
							</div>
						</div>
					</template>
				</draggable>
			</div>
			<div>
				<el-form-item v-if="formData.list?.length < tabbarLimit.max" label-width="0">
					<el-button class="w-full" type="primary" @click="handleAdd"> 添加导航 </el-button>
				</el-form-item>
			</div>
		</el-card>
	</el-form>
</template>

<script lang="ts" setup name="diyTabbar">
import { reactive, onMounted, watch } from 'vue';
import { diyGetTabbar } from '/@/api/diy';
import { messageError } from '/@/utils/message';
import Draggable from 'vuedraggable';

const tabbarLimit = reactive({
	max: 5,
	min: 2,
});

const formData = reactive({
	style: {
		default_color: '',
		selected_color: '',
	},
	list: [
		{
			name: '',
			selected_icon: '',
			unselected_icon: '',
			link: '',
		},
		{
			name: '',
			selected_icon: '',
			unselected_icon: '',
			link: '',
		},
	],
});

const emit = defineEmits(['getData']);

watch(
	formData,
	() => {
        emit('getData', formData);
	},
	{ immediate: true }
);

const predefineColors = ['#409EFF', '#28C76F', '#EA5455', '#FF9F43', '#01CFE8', '#4A5DFF'];

const handleAdd = () => {
	if (formData.list?.length < tabbarLimit.max) {
		formData.list.push({
			name: '',
			selected_icon: '',
			unselected_icon: '',
			link: '',
		});
	} else {
		messageError(`导航最多添加${tabbarLimit.max}个`);
	}
};

const handleDelete = (index: number) => {
	if (formData.list?.length <= tabbarLimit.min) {
		return messageError(`导航最少保留${tabbarLimit.min}个`);
	}
	formData.list.splice(index, 1);
};

const onMove = (e: any) => {
	if (e.relatedContext.index == 0) {
		return false;
	}
	return true;
};

const getData = async () => {
	const data = await diyGetTabbar({ type: 1 });
	if (data.data?.list) formData.list = data.data.list;
	if (data.data?.style) formData.style = data.data.style;
	emit('getData', formData);
};

onMounted(() => {
	getData();
});

defineExpose({
	getData
});
</script>
<style lang="scss" scoped></style>
